<template>
  <el-dialog
    :visible.sync="dialogVisible"
    top="10vh"
    append-to-body
    :close-on-click-modal="false"
    class="tag-edit-dialog sys-time-dialog"
    width="50%"
    @closed="clearDialog"
    v-dialogMove
  >
    <div slot="title">
      <tag-content-header>
        <template #title>
          <span class="title-text">设置有效期</span>
        </template>
      </tag-content-header>
    </div>
    <el-form :model="editForm" label-width="120px" ref="editForm">
      <div class="new-button" v-if="editForm.timeList.length === 0">
        <el-button type="primary" @click="addTime(0)">新增有效期</el-button>
      </div>
      <div class="time-box" v-for="(item, index) in editForm.timeList" :key="index">
        <el-form-item label="次序">
          <el-col :span="8">
            <span>第{{ index + 1 }}组时间</span>
          </el-col>
          <el-col :span="14">
            <div class="time-btn-box">
              <el-button
                @click="addTime(index + 1)"
                type="primary"
                class="time-button"
                plain
                icon="el-icon-plus"
                size="mini"
              ></el-button>
              <el-button
                @click="removeTime(index)"
                type="primary"
                class="time-button"
                plain
                icon="el-icon-minus"
                size="mini"
                v-if="editForm.timeList.length > 1"
              ></el-button>
            </div>
          </el-col>
        </el-form-item>
        <el-form-item label="执行周期" class="rate-form">
          <el-checkbox :indeterminate="item.monthInd" v-model="item.monthAll" @change="typeAllChange(item, 'month', 12)"
            >月份</el-checkbox
          >
          <el-checkbox-group v-model="item.month" @change="typeChange(item, 'month', 12)">
            <el-checkbox v-for="month in 12" :label="month" :key="month">{{ month }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>

        <el-form-item label="" class="rate-form">
          <el-radio-group v-model="item.dateType">
            <el-radio label="date">按日期</el-radio>
            <el-radio label="week">按星期</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="" v-if="item.dateType === 'date'" class="rate-form">
          <el-checkbox :indeterminate="item.dateInd" v-model="item.dateAll" @change="typeAllChange(item, 'date', 31)"
            >全部</el-checkbox
          >
          <el-checkbox-group v-model="item.date" :min="1" @change="typeChange(item, 'date', 31)">
            <el-checkbox v-for="date in 31" :label="date" :key="date">{{ date }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>

        <el-form-item label="" v-if="item.dateType === 'week'" class="rate-form">
          <el-checkbox :indeterminate="item.weekInd" v-model="item.weekAll" @change="typeAllChange(item, 'week', 7)"
            >全部</el-checkbox
          >
          <el-checkbox-group v-model="item.week" :min="1" @change="typeChange(item, 'week', 7)">
            <el-checkbox v-for="week in 7" :label="week" :key="week">{{ weekShow(week) }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>

        <el-form-item
          label=""
          :prop="'timeList.' + index + '.time'"
          :rules="{ required: true, type: 'array', min: 2, message: '请选择时间', trigger: 'change' }"
          class="rate-form"
        >
          <el-time-picker
            is-range
            v-model="item.time"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            placeholder="选择时间范围"
            value-format="HH:mm:ss"
            size="small"
          >
          </el-time-picker>
        </el-form-item>
      </div>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="submit">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      editForm: {
        timeList: []
      }
    }
  },
  methods: {
    showDialog(data) {
      this.setTimeList(data)
      this.dialogVisible = true
    },
    setTimeList(data) {
      let list = []
      data.forEach(item => {
        let t = {
          month: item.monthVal ? item.monthVal.split('|').map(parseFloat) : [],
          date: item.dayVal ? item.dayVal.split('|').map(parseFloat) : this.getNumList(31),
          week: item.weekVal ? item.weekVal.split('|').map(parseFloat) : this.getNumList(7),
          time: [item.startTime, item.endTime]
        }
        this.typeChange(t, 'month', 12)
        this.typeChange(t, 'date', 31)
        this.typeChange(t, 'week', 7)
        if (item.dayVal) t.dateType = 'date'
        if (item.weekVal) t.dateType = 'week'
        list.push(t)
      })
      this.editForm.timeList = list
    },
    addTime(index) {
      this.editForm.timeList.splice(index, 0, {
        month: [],
        date: this.getNumList(31),
        week: this.getNumList(7),
        time: ['00:00:00', '23:59:59'],
        monthAll: false,
        monthInd: false,
        dateType: 'date',
        dateAll: true,
        dateInd: false,
        weekAll: true,
        weekInd: false
      })
    },
    removeTime(index) {
      this.editForm.timeList.splice(index, 1)
    },
    typeAllChange(item, type, num) {
      item[type] = item[type + 'All'] ? this.getNumList(num) : []
      item[type + 'Ind'] = false
    },
    typeChange(item, type, num) {
      let checkedCount = item[type].length
      item[type + 'All'] = checkedCount === num
      item[type + 'Ind'] = checkedCount > 0 && checkedCount < num
    },
    getNumList(num = 0) {
      let list = []
      for (var i = 1; i <= num; i++) {
        list.push(i)
      }
      return list
    },
    weekShow(week) {
      let str = ''
      switch (week) {
        case 1:
          str = '一'
          break
        case 2:
          str = '二'
          break
        case 3:
          str = '三'
          break
        case 4:
          str = '四'
          break
        case 5:
          str = '五'
          break
        case 6:
          str = '六'
          break
        case 7:
          str = '日'
          break
      }
      return str
    },
    submit() {
      this.$refs['editForm'].validate(valid => {
        if (valid) {
          this.$emit('save', this.getTimeList())
          this.dialogVisible = false
        }
      })
    },
    getTimeList() {
      let list = []
      this.editForm.timeList.forEach(item => {
        let t = {
          monthVal: item.month.join('|'),
          startTime: item.time[0],
          endTime: item.time[1]
        }
        if (item.dateType === 'date') {
          t.dayVal = item.date.join('|')
        } else if (item.dateType === 'week') {
          t.weekVal = item.week.join('|')
        }
        list.push(t)
      })
      return list
    },
    clearDialog() {
      this.editForm.timeList = []
    }
  }
}
</script>

<style lang="scss">
.sys-time-dialog {
  .new-button {
    border: 1px solid $border-color;
    line-height: 140px;
    text-align: center;
  }
  .time-box {
    border: 1px solid $border-color;
    padding-top: 22px;
    padding-bottom: 22px;
    & + .time-box {
      border-top: 0;
    }
    .time-btn-box {
      float: right;
    }
    .time-button {
      font-size: 16px;
      padding: 6px 8px;
      vertical-align: middle;
    }
    .rate-form {
      margin-bottom: 0;
      .el-checkbox {
        min-width: 40px;
      }
    }
    .el-date-editor .el-range-separator {
      width: 26px;
    }
  }
}
</style>
